<template>
    <view class="gy-number-box">
        <view class="gy-number-box-btn gy_icon_reduce" :class="{disabled: keywords <= props.min}" @click.stop="reduceFn"></view>
        <view class="gy-number-box-show">{{ keywords }}</view>
        <view class="gy-number-box-btn gy_icon_plus" :class="{disabled: keywords >= props.max}" @click.stop="plusFn"></view>
    </view>
</template>

<script lang="ts" setup>

    import {
    	ref,
		watch
    } from "vue";

    const emits = defineEmits(["update:modelValue", "change"]);
    const props = defineProps({
    	modelValue: {
    		type: Number,
    	    default: 1
    	},
        min: {
        	type: Number,
            default: 1
        },
        max: {
        	type: Number,
            default: 10
        }
    });

    const keywords = ref(props.min);

    function inputFn(){
        if(keywords.value <= props.min){
            keywords.value = props.min;
        }
        if(keywords.value >= props.max){
            keywords.value = props.max;
        }
        emits("update:modelValue", keywords.value);
		emits("change");
    }
    function reduceFn(){
        if(keywords.value === props.min){
            keywords.value = props.min;
        }else if(keywords.value < props.min){
            keywords.value = props.min;
			inputFn();
        }else{
            keywords.value -= 1;
			inputFn();
        }
    }
    function plusFn(){
        if(keywords.value === props.max){
            keywords.value = props.max;
        }else if(keywords.value > props.max){
            keywords.value = props.max;
			inputFn();
        }else{
            keywords.value += 1;
			inputFn();
        }
    }
	
	watch(() => props.modelValue, (newVal: any, oldVal: any) => {
		keywords.value = props.modelValue;
	}, {immediate: true})

</script>

<style lang="scss" scoped>
	.gy-number-box{
	    width: 150rpx;
	    @include flex-center-center;
	    .gy-number-box-btn{
	        width: 46rpx;
	        height: 46rpx;
	        @include flex-center-center;
	        background-color: #f0f0f0;
	        color: var(--gy-text-color-primary);
	        font-size: var(--gy-font-size-small);
	    }
	    .gy-number-box-btn.disabled{
	        color: var(--el-text-color-disabled);
	    }
	    .gy-number-box-show{
	        width: calc(100% - 112rpx);
	        margin: 0 10rpx;
	        text-align: center;
	        font-size: var(--gy-font-size-base);
	    }
	}
</style>